<template>
  <div class="container" style="padding:20px 20px 60px;overflow: hidden auto;height: 100vh">
    <div class="lrubtn-box" v-if="showOpen">
      <a :href="weixinobj" class="lrubtn">点击开始录入</a>
    </div>
    <a-row :gutter="10">
      <a-col class="gutter-row" :span="24"><h1 class="flex justify-center">船员基本信息录入</h1></a-col>
      <a-col class="gutter-row mt20" :span="24">
        <div class="gutter-box fw mb10">
          <div class="mr6 mb10">船员中文姓名：</div>
          <a-input v-model:value="form.xingMing" id="t1" maxlength="100" placeholder="请填写"/>
        </div>
        <div class="gutter-box fw mb10">
          <div class="mr6 mb10"><span class="red mr2">*</span>手机号：</div>
          <a-input placeholder="请填写" id="t3" v-model:value="form.shouJiHao" maxlength="100"/>
        </div>
        <div class="gutter-box fw mb10">
          <div class="mr6 mb10">身份号：</div>
          <a-input placeholder="请填写" id="t4" v-model:value="form.shenFenHao" maxlength="100"/>
        </div>
        <div class="gutter-box fw mb10">
          <div class="mr6 mb10">职务：</div>
          <a-select
              v-model:value="form.zhiWei"
              ref="select"
              class="w100"
              placeholder="请选择"
              allow-clear
              style="width: 120px">
            <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">{{
                item.zhiWeiMing
              }}
            </a-select-option>
          </a-select>
        </div>
        <div class="gutter-box fw mb10">
          <div class="mr6 mb10">证书等级：</div>
          <a-select class="w100" placeholder="请选择" v-model:value="form.zhengShuDengJi">
            <a-select-option :value="item.name" :key="item.name" v-for="item in zsdjList">{{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </a-col>
    </a-row>
  </div>
  <div class="flex justify-center mt20" style="position: sticky;bottom:0px;background: #fff;padding:8px;">
    <a-button type="primary" @click="handleSubmit" :loading="addLoading" class="mr10 w100">
      {{ btnflag ? '添加' : '修改' }}
    </a-button>
  </div>
</template>
<script setup>

const addLoading = ref(false)
const zhiweiList = ref([])
const userState = useStore.userState()
const zsdjList = ref([])
const weixinobj = ref("")
const openid = ref("")
const systemId = ref("")
const showOpen = ref(true)
const btnflag = ref(true)

const form = ref({
  openid: "",
  xingMing: "",
  shouJiHao: "",
  shenFenHao: "",
  zhiWei: null,
  zhengShuDengJi: null,
  systemId: 1
})

function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}


const handleSubmit = async () => {
  try {

    if (!form.value.shouJiHao) {
      useMessage().error("请输入手机号")
      getDom('t3').focus()
      return
    }

    if (!isPhoneNumber(form.value.shouJiHao)) {
      useMessage().error("手机号不合法")
      getDom('t3').focus()
      return
    }

    addLoading.value = true
    await useSaveUpdateChuanYuanSHApi(form.value)
    addLoading.value = false
    useMessage().success("添加成功!")
    window.location.href = "/addsuccess"
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}


function isPhoneNumber(phoneNumber) {
  const reg = /^1[3456789]\d{9}$/;
  return reg.test(phoneNumber)
}



// 获取code方法 在js中不建议使用route.query.code方式
let getUrlCodeParam = (name) => {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
}

let getOpenId = () => {
  // 如果没用code 我们就走这里
  let redirect_url = encodeURIComponent("http://www.kaiheng.top/vadmin/weilogin/callback?sid="+systemId.value);
  // 这里是定义的appid,可以通过配置获取，也可以写死在这里；
  let app_id = "wx5c890ee944ed7cef";
  // 这里是默认方法
  let url =
      "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
      app_id +
      "&redirect_uri=" +
      redirect_url +
      "&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
  weixinobj.value = url
}

const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi2(systemId.value)
  zhiweiList.value = res.data
}

const handleLoadParameterLoad = async () => {
  const resp = await useLoadSystemSysParameterAllApi()
  zsdjList.value = JSON.parse(resp.data.find(res => res.code == 'zsdj').pvalue)
}
const handleLoadXinxin = async () => {
  const resp = await useGetChuanYuanSHByOpenIdApi(openid.value,systemId.value)
  if (resp.data) {
    showOpen.value = false
    btnflag.value = false
    form.value = resp.data
    form.value.openid = openid.value
    form.value.systemId = systemId.value
  } else {
    btnflag.value = true
  }
}

onMounted(async () => {
  openid.value = getQueryString("openid")
  systemId.value = getQueryString("sid")
  form.value.systemId = systemId.value
  if (openid.value) {
    form.value.openid = openid.value
    showOpen.value = false
    handleLoadXinxin()
  } else {
    showOpen.value = true
    getOpenId()
  }
  handleLoadZhiweiData()
  handleLoadParameterLoad()
})
</script>
<style lang="scss">
.lrubtn-box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);

  .lrubtn {
    width: 180px;
    height: 52px;
    display: inline-block;
    border-radius: 6px;
    background: #00e587;
    text-align: center;
    line-height: 52px;
    color: #fff;
  }
}

.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden !important;
    padding: 0px;
  }

  .ant-modal-body {
    flex: 1;
  }

  .content-body {
    padding: 20px 24px;
    height: calc(100vh - 130px);
    overflow: hidden auto;
  }
}
</style>
